<template>
  <div class="ele-body">
    <div class="tital_war">
      <h1>商品类型</h1>
    </div>
    <a-card :bordered="false">
      <!-- 表格 -->
      <ele-pro-table ref="table" row-key="id" :datasource="cateLists" :columns="columns" :scroll="{ x: 'max-content' }">
        <template #toolbar>
          <a-space>
            <a-button type="primary" @click="openAddCate()">
              <template #icon>
                <plus-outlined />
              </template>
              <span>添加类型</span>
            </a-button>
          </a-space>
        </template>
        <!-- ID -->
        <template #id="{ record }">
          {{ record.id }}
        </template>
        <!-- 规格名称 -->
        <template #brand_name="{ record }">
          {{ record.type_name }}
        </template>
        <!-- 排序 -->
        <template #sort="{ record }">
          {{ record.sort }}
        </template>
        <!-- 操作 -->
        <template #operation="{ record }">
          <div class="editable-row-operations">
            <span> <a @click="() => editRowIndex(record)">编辑</a>&nbsp; </span>
            <span> <a @click="delRowIndex(record)">删除</a>&nbsp; </span>
          </div>
        </template>
      </ele-pro-table>
    </a-card>
  </div>
  <!-- 编辑弹窗 -->
  <a-modal v-model:visible="editCateDia" title="编辑类型" @cancel="editHandleCancel" width="70%">
    <template #footer>
      <a-button key="back" @click="editCateOk">确定</a-button>
      <a-button key="submit" type="primary" @click="editHandleCancel">取消</a-button>
    </template>
    <a-form :model="editForm" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="editFormRules" ref="editFormRef">
      <a-form-item label="类型名称中文" name="type_name_zh">
        <a-input v-model:value="editForm.type_name_zh" placeholder="请输入类型名称中文" />
      </a-form-item>
      <a-form-item label="类型名称英文" name="type_name_zh">
        <a-input v-model:value="editForm.type_name_en" placeholder="请输入类型名称英文" />
      </a-form-item>
      <a-form-item label="类型名称德语" name="type_name_zh">
        <a-input v-model:value="editForm.type_name_de" placeholder="请输入类型名称德语" />
      </a-form-item>
      <a-form-item label="排序">
        <a-input style="width: 100px;" v-model:value="editForm.sort" type="number" :min="0" :max="999" />
      </a-form-item>
      <a-form-item label="关联规格">
        <a-checkbox-group v-model:value="choiceLists" :options="guanLianLists" />
      </a-form-item>
    </a-form>
  </a-modal>
  <!-- 添加分类弹窗 -->
  <a-modal v-model:visible="addCateDia" title="添加类型" @cancel="handleCancel" width="70%">
    <template #footer>
      <a-button key="back" @click="addCateOk">确定</a-button>
      <a-button key="submit" type="primary" @click="handleCancel">取消</a-button>
    </template>
    <a-form :model="addForm" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="addFormRules" ref="addFormRef">
      <a-form-item label="类型名称中文" name="cateName_zh">
        <a-input v-model:value="addForm.cateName_zh" placeholder="请输入类型名称中文" />
      </a-form-item>
      <a-form-item label="类型名称英文" name="cateName_en">
        <a-input v-model:value="addForm.cateName_en" placeholder="请输入类型名称英文" />
      </a-form-item>
      <a-form-item label="类型名称德语" name="cateName_de">
        <a-input v-model:value="addForm.cateName_de" placeholder="请输入类型名称德语" />
      </a-form-item>
      <a-form-item label="排序">
        <a-input style="width: 100px;" v-model:value="addForm.sort" type="number" :min="0" :max="999" />
      </a-form-item>
      <a-form-item label="关联规格">
        <a-checkbox-group v-model:value="addChoiceLists" :options="guanLianLists" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { createVNode } from 'vue'
import qs from 'qs'
import { PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { mapGetters } from 'vuex'

export default {
  name: 'SystemUser',
  components: {
    PlusOutlined
  },
  computed: {
    ...mapGetters(['permission'])
  },
  data() {
    return {
      // 商品列表数据
      cateLists: [],
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          width: 90
        },
        {
          title: '类型名称',
          dataIndex: 'type_name'
        },
        {
          title: '排序',
          dataIndex: 'sort'
        },
        {
          title: '编辑',
          slots: { customRender: 'operation' }
        }
      ],
      // 表格搜索条件
      where: {},
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 分类名称
      searchName: '',
      // 新建分类的对话框
      addCateDia: false,
      // 添加分类数据
      addForm: {
        cateName_zh: '',
        cateName_en: '',
        cateName_de: '',
        sort: 999
      },
      // 添加数据的验证
      addFormRules: {
        cateName_zh: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        cateName_en: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        cateName_de: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ]
      },
      // 编辑数据的验证
      editFormRules: {
        type_name_zh: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        type_name_en: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ],
        type_name_de: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
          }
        ]
      },
      // 编辑的弹窗控制
      editCateDia: false,
      // 编辑的form表单数据
      editForm: {},
      // 添加规格的数据
      addOrderInfo: {},
      // 关联数据
      guanLianLists: [],
      // 选择的关联数据
      choiceLists: [],
      // 添加关联得空数据
      addChoiceLists: []
    }
  },
  created() {
    this.getCateLists()
  },
  methods: {
    // 获取商品列表数据
    // 打开新建弹窗
    async openAddCate() {
      this.addCateDia = true
      // this.getSelectOption();
      this.guanlianData()
    },
    // 确认添加分类
    addCateOk() {
      this.$refs.addFormRef
        .validate()
        .then(async () => {
          let sends = {
            'type_name[zh]': this.addForm.cateName_zh,
            'type_name[en]': this.addForm.cateName_en,
            'type_name[de]': this.addForm.cateName_de,
            sort: this.addForm.sort,
            rule_data: this.addChoiceLists
          }
          const res = await this.$http.post('/product/type', qs.stringify(sends))
          console.log(res)
          if (res.data.code != 0) return this.$message.warning('类型添加失败')
          this.$message.success('类型添加成功')
          this.addCateDia = false
          this.addForm = {
            cateName_zh: '',
            cateName_en: '',
            cateName_de: '',
            sort: 999
          }
          this.addChoiceLists = []
          this.getCateLists()
        })
        .catch(error => {
          console.log('error', error)
          this.$message.info('类型添加失败')
        })
    },
    // 取消添加分类
    handleCancel() {
      this.$refs.addFormRef.clearValidate()
      this.addForm = {
        cateName_zh: '',
        cateName_en: '',
        cateName_de: '',
        sort: 999
      }
      this.addCateDia = false
    },
    /* 获取商品分类列表 */
    async getCateLists() {
      const { data: res } = await this.$http.get('/product/type?lang=zh')
      console.log(res)
      this.cateLists = res.data.list
      console.log(this.cateLists)
    },
    // 封装关联数据得多选值
    async guanlianData() {
      const { data: reslut } = await this.$http.get('/product/rule?lang=en')
      let newArr = []
      reslut.data.list.forEach(element => {
        newArr.push({
          value: element.id,
          label: element.rule_name
        })
      })
      this.guanLianLists = newArr
    },
    // 编辑按钮
    async editRowIndex(row) {
      const { data: res } = await this.$http.get('/product/type/' + row.id)
      this.editForm = res.data
      this.editForm.type_name_zh = this.editForm.type_name.zh
      this.editForm.type_name_en = this.editForm.type_name.en
      this.editForm.type_name_de = this.editForm.type_name.de
      this.guanlianData()
      let arr = []
      res.data.rule_data.forEach(element => {
        arr.push(element.id)
      })
      this.choiceLists = arr
      this.editCateDia = true
    },
    // 删除
    delRowIndex(row) {
      this.$confirm({
        title: '确定删除？',
        content: '删除后将无法恢复',
        okText: '确定',
        cancelText: '取消',
        icon: createVNode(ExclamationCircleOutlined),
        onOk: async () => {
          const res = await this.$http.delete('/product/type/' + row.id)
          console.log(res)
          if (res.status == 200) {
            this.$message.success('类型删除成功')
            this.getCateLists()
          }
        },
        onCancel: () => {
          this.$message.info('取消操作')
        }
      })
    },
    // 编辑弹窗关闭的回调
    editHandleCancel() {
      this.editCateDia = false
    },
    // 编辑弹窗确定的回调
    async editCateOk() {
      this.$refs.editFormRef
        .validate()
        .then(async () => {
          let editArr = {}
          editArr.id = this.editForm.id
          editArr['type_name[zh]'] = this.editForm.type_name_zh
          editArr['type_name[en]'] = this.editForm.type_name_en
          editArr['type_name[de]'] = this.editForm.type_name_de
          editArr['sort'] = this.editForm.sort
          editArr.rule_data = this.choiceLists
          const res = await this.$http.post('/product/type/update', qs.stringify(editArr))
          console.log(res)
          if (res.data.code != 0) return this.$message.warning('编辑失败')
          this.$message.success('编辑成功')
          this.getCateLists()
          this.editCateDia = false
        })
        .catch(error => {
          console.log(error)
          this.$message.warning('编辑失败')
        })
    }
  }
}
</script>

<style scoped lang="less">
.tital_war {
  width: 100%;
  height: 50px;
  background: #fff;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  h1 {
    margin: 0;
    padding: 0;
    margin-left: 10px;
    font-size: 22px;
    font-weight: 500;
  }
}
</style>
